<template>
    <div class="login-container">
        <img src="../img/333.png" alt="" class="school" />
        <div class="box">
            <img src="../img/222.png" alt="" class="side-img" />
            <el-form ref="form" :model="form" :rules="rules" class="login-page">
                <h2 class="title" style="margin-bottom: 20px">华商校园场馆预约平台登陆</h2>
                <el-form-item prop="username">
                    <el-input v-model="form.username" clearable>
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" clearable show-password>
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex">
                        <el-input v-model="form.validCode" style="width: 45%" placeholder="请输入验证码"></el-input>
                        <ValidCode @input="createValidCode" style="width: 50%" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" @click="login">登 录</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" @click="$router.push('/register')">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import request from '../utils/request';
import { ElMessage } from 'element-plus';
import ValidCode from '../components/Validate';

export default {
    name: 'Login',
    components: {
        ValidCode,
    },
    data() {
        return {
            validCode: '', //通过valicode获取的验证码
            form: { password: '123456' },
            rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    methods: {
        createValidCode(data) {
            this.validCode = data;
        },
        login() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    if (!this.form.validCode) {
                        ElMessage.error('请填写验证码');
                        return;
                    }
                    if (this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
                        ElMessage.error('验证码错误');
                        return;
                    }

                    let res = await request.post('user/login', this.form);
                    if (res.status == 200) {
                        ElMessage.success('登录成功');
                        // sessionStorage.setItem("user", JSON.stringify(res.data)) //缓存用户信息
                        sessionStorage.setItem('token', res.data);
                        // 获取用户的信息
                        let res2 = await request.get('user/info');
                        if (res2.status == 200) {
                            sessionStorage.setItem('user', JSON.stringify(res2.data)); //缓存用户信息
                            this.$router.push('/dashboard');
                        } else {
                            ElMessage.error(res2.message);
                        }
                    } else {
                        ElMessage.error(res.message);
                    }
                }
            });
        },
    },
};
</script>

<style scoped>
.login-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('../img/111.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
.school {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 100px;
}
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.side-img {
    height: 367px;
    background: linear-gradient(to right, #1344bb 0%, #bbccdd 100%);
}
.login-page {
    border-radius: 5px;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.title {
    font-size: 20px;
    text-align: center;
}
</style>
